<link rel="stylesheet" href="/Public/assets/jquery-avatar/css/amazeui.cropper.css">
<link rel="stylesheet" href="/Public/assets/jquery-avatar/css/custom_up_img.css">
<style>
    .am-form-file {
        cursor: pointer;
    }
    
    .avatar {
        cursor: pointer;
        width: 150px;
        height: 150px;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
    }
    .layui-form-label {
        width: 200px;
    }
</style>
</style>
<div class=" widget-head " style="margin-top:0; ">
    <div class="widget-title ">修改头像</div>
</div>
<div class="layui-container " style="width:100%; ">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">当前头像：</label>
            <div class="layui-input-block">
                <div class="up-img-cover" id="up-img-touch">
                    <img class="avatar" alt="点击图片上传" src="{$_SESSION['loginUser']['avatar'] | default='/Public/common/img/boy1.png'}" data-am-popover="{content: '点击上传', trigger: 'hover focus'}">
                </div>
            </div>
        </div>
    </form>

    <!--图片上传框-->
    <div class="am-modal am-modal-no-btn up-modal-frame" tabindex="-1" id="up-modal-frame">
        <div class="am-modal-dialog up-frame-parent up-frame-radius">
            <div class="am-modal-hd up-frame-header">
                <label>修改头像</label>
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd  up-frame-body">
                <div style="padding:0 20px;">
                    <div class="am-g am-fl">
                        <div class="am-form-group am-form-file">
                            <div class="am-fl">
                                <button type="button" class="am-btn am-btn-default am-btn-sm"><i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
                            </div>
                            <input type="file" class="up-img-file">
                        </div>
                    </div>
                    <div class="am-g am-fl">
                        <div class="up-pre-before up-frame-radius">
                            <img alt="" src="" class="up-img-show" id="up-img-show">
                        </div>
                        <div class="up-pre-after up-frame-radius">
                        </div>
                    </div>
                    <div class="am-g am-fl" style="width:100%;">
                        <div class="up-control-btns">
                            <span class="am-icon-rotate-left" id="up-btn-left"></span>
                            <span class="am-icon-rotate-right" id="up-btn-right"></span>
                            <span class="am-icon-check up-btn-ok" url="/user/api/upload_avatar_base64" parameter="{width:'400',height:'400'}"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--加载框-->
    <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="up-modal-loading">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">正在上传...</div>
            <div class="am-modal-bd">
                <span class="am-icon-spinner am-icon-spin"></span>
            </div>
        </div>
    </div>

    <!--警告框-->
    <div class="am-modal am-modal-alert" tabindex="-1" id="up-modal-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">信息</div>
            <div class="am-modal-bd" id="alert_content">
                成功了
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>
</div>

<script src="/Public/assets/jquery-avatar/js/amazeui.min.js" charset="utf-8"></script>
<script src="/Public/assets/jquery-avatar/js/cropper.min.js" charset="utf-8"></script>
<script src="/Public/assets/jquery-avatar/js/custom_up_img.js?v=1.1" charset="utf-8"></script>